<%-- 
    Document   : updemo
    Created on : Mar 14, 2012, 1:48:24 PM
    Author     : ZoeZhang
--%>

<%-- <%@page import="com.cmti.agency.util.Constants"%> --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
    pageContext.setAttribute("contextPath", request.getContextPath());
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <title>JSP Page</title>
        <style type="text/css">
            body {
                font-size: 12px;
                overflow: hidden;
                padding: 10px;
                margin: 0;
                color: #838383
            }

            .tabWarper {
                width: 600px;
                height: 370px;
                overflow: hidden;
                position: relative;
            }

            .head {
                height: 35px;
                line-height: 35px;
                position: relative;
                z-index: 2
            }

            .head span {
                width: 62px;
                height: 28px;
                line-height: 28px;
                display: block;
                float: left;
                text-align: center;
                margin-right: 1px;
                cursor: pointer
            }

            .head span.def {
                background: url("../../themes/default/images/dialog-title-bg.png") repeat-x;
                border: 1px solid #ccc;
            }

            .head span.act {
                background: #FFF;
                border: 1px solid #ccc;
                border-bottom: 1px solid #FFF
            }

            .tabContainer {
                width: 1250px;
                height: 320px;
                position: relative;
                top: -6px;
            }

            .content {
                width: 588px;
                height: 320px;
                float: left;
                border: 1px solid #ddd;
                padding: 5px;
                margin-right: 20px;
            }

            .content table {
                margin-top: 5px;
                position: relative;
            }

            .content table tr {
                height: 35px;
                line-height: 35px;
            }

            .lable {
                text-align: center;
                width: 45px;
            }

            td input {
                width: 125px;
                height: 21px;
                line-height: 21px;
                background: #FFF;
                border: 1px solid #d7d7d7;
            }

            #url {
                width: 534px;
                margin-bottom: 2px;
            }

            #preview {
                width: 330px;
                height: 252px;
                position: absolute;
                top: 50px;
                left: 246px;
                background: #eee;
                padding: 5px;
                overflow: auto
            }

            .start {
                float: right;
                width: 100px;
                height: 28px;
                line-height: 28px;
                background: #ddd url("../../themes/default/images/upload.png");
                border: 0;
                cursor: pointer;
                display: none;
            }

            .control {
                z-index: 9999;
                position: absolute;
                width: 588px;
                height: 36px;
                line-height: 36px;
                top: 315px;
                left: 6px;
            }

            .align {
                float: left;
                height: 36px;
            }

            .singlelable {
                background: url(../../themes/default/images/imgLable.png) -21px 2px no-repeat
            }

            .batchlable {
                display: block;
                float: left;
                width: 50px;
                height: 36px;
                background: url(../../themes/default/images/imgLable.png) -21px 2px no-repeat
            }

            .lock-zoom {
                position: absolute;
                width: 25px;
                height: 40px;
                top: 60px;
                left: 200px;
                background: url("../../themes/default/images/lock.gif") 0 -3px;
            }

            .lock-zoom input {
                position: relative;
                top: 10px;
                left: -2px;
            }
            .flag{color: blue}
        </style>
        <script type="text/javascript" src="../tangram.js"></script>
        <script type="text/javascript" src="${contextPath}/js/jquery.js"></script>
        <script type="text/javascript">
            var imageCount = 0; //图片张数
            /** 
             * 选择文件后的回调函数
             * @param   Array
             */
            function selectFileCallback(selectFiles){
                // 数组里单个元素为Object，{index:在多图上传的索引号, name:文件名, size:文件大小}
                // 其中size单位为Byte
                imageCount += selectFiles.length;
                if(imageCount > 0){
                    $("#start").show();
                }
            }
            /** 
             * 文件大小超出时的回调函数
             * @param   Object
             */
            function exceedFileCallback(file){
                // 参数为Object，{index:在多图上传的索引号, name:文件名, size:文件大小}
                // 其中size单位为Byte
            }
            /**
             * 删除文件后的回调函数
             * @param   Array
             */
            function deleteFileCallback(delFiles){
                // 数组里单个元素为Object，{index:在多图上传的索引号, name:文件名, size:文件大小}
                // 其中size单位为Byte
                imageCount -= delFiles.length;
                if( imageCount==0 ){
                    $("#start").hide();
                }
            }
            /**
             * 开始上传单个文件的回调函数
             * @param   Object
             */
            function startUploadCallback(file){
            }
            /**
             * 单个文件上传完成的回调函数
             * @param   Object/String   服务端返回啥，参数就是啥
             */
            function uploadCompleteCallback(data){
                var info = eval( "(" + data.info + ")" );
                $("#imagesBox").append("<a class='readyImg' title='"+info.title+"' data-fancybox-group='gallery' href='${contextPath}/"+info.url+"'><img src='${contextPath}/"+info.url+"'/ alt='' /></a>");
                imageCount--;
            }
            /**
             * 单个文件上传失败的回调函数
             * @param  Object/String   服务端返回啥，参数就是啥
             */
            function uploadErrorCallback(data){
            }
            /**
             * 全部上传完成的回调函数
             */
            function allCompleteCallback(){
            }

            function upload(){
                flash.upload();
                $("#start").hide();
            }

//            function pause(){
//                flash.pause();
//            }

            function changeFlashHeight(height){
                flash.height = height;
                var obj = document.getElementById("flashcontent");
                obj.style.height = height + 2;
            }
        </script>
    </head>
    <body>
        <div id="flashcontent" style="width:540px; height:300px;top:8px;left:8px;cursor:pointer;"></div>
        <div style="position:relative;padding: 5px 0 0 0;">
            <span><input id="start" class="start" type = "button" value = "&nbsp;" onclick = "upload()" /></span>
<!--            <span><input type = "button" value = "暂 停" onclick = "pause()" /></span>-->
        </div>
        <div id="imagesBox" style="display: none">
        </div>
        <script type="text/javascript">
            var options = {
                createOptions:{
                    id:"flash",
                    url:"imageUploader.swf",
                    width:"540",
                    height:"300",
                    errorMessage:"error in embeding flash",
                    wmode:"transparent",
                    ver:"9.0.0",
                    // 初始化的参数就是这些，
                    vars:{
                        width:540, //width是flash的宽
                        height:300,     //height是flash的高
                        gridWidth:135, // gridWidth是每一个预览图片所占的宽度，应该为width的整除
                        gridHeight:135, // gridHeight是每一个预览图片所占的高度，应该为height的整除
                        picWidth:88,    // 单张预览图片的宽度
                        picHeight:108,  // 单张预览图片的高度
                        uploadDataFieldName:"picdata",  // POST请求中图片数据的key,默认值为'picdata', 
                        picDescFieldName:"pictitle",     // POST请求中图片描述的key,默认值为'picDesc'
                        maxSize:0.5,  // 文件的最大体积
                        compressSize:3, // 上传前如果图片体积超过该值，会先压缩
                        maxNum:32,  // 最大上传多少个文件
                        compressLength:1280,    // 能接受的最大边长，超过该值会等比压缩
                        url:"${contextPath}/uploadPhoto",    // 上传的url地址
                        mode:0,  // mode == 0时，是使用滚动条，mode == 1时，拉伸flash,默认值0,
                        backgroundUrl: '',
                        listBackgroundUrl: '',
                        buttonUrl: ''
                    },
                    container: "flashcontent"
                },
                selectFileCallback: "selectFileCallback",   // 选择文件的回调
                exceedFileCallback: "exceedFileCallback",   // 文件超出限制的最大体积时的回调
                deleteFileCallback: "deleteFileCallback",   // 删除文件的回调
                startUploadCallback: "startUploadCallback",  // 开始上传某个文件时的回调
                uploadCompleteCallback: "uploadCompleteCallback",   // 某个文件上传完成的回调
                uploadErrorCallback: "uploadErrorCallback",  // 某个文件上传失败的回调
                allCompleteCallback: "allCompleteCallback",  // 全部上传完成时的回调
                changeFlashHeight: "changeFlashHeight"     // 改变Flash的高度，mode==1的时候才有用
            };

            var flash = new baidu.flash.imageUploader(options);
    
        </script>
    </body>
</html>
